<template>
  <div>
    Home组件 --{{ $store.state.count }}
    <br>
    <br>
    count:{{ count }}

    <br>
    <br>
    num:{{ num }}
    <br><br>
    <button @click="incCount">执行mutations方法</button>
    <br><br>
    <button @click="incActionCount">执行actions方法</button>

    <br><br>
    <button @click="setActionCount(123)">执行actions方法 传值</button>
  </div>
</template>

<script>

import { computed, defineComponent } from 'vue';
import { useStore } from 'vuex'

export default defineComponent({
  setup() {
    const store = useStore();
    return {
      count: computed(() => {
        return store.state.count
      }),
      num: computed(() => {
        return store.getters.num

      }),
      incCount: () => {
        store.commit('incCount')
      },
      incActionCount: () => {
        store.dispatch('incCount')
      },
      setActionCount: (num) => {
        store.dispatch('setCount', num)
      }
    }
  }
})
</script>

<style lang="scss"></style>